<template>
  <div class="search">
    <Card>
      <Button class="but" :class="{buts:auditType===index}" type="text" v-for="(item,index) in audit" :key="index" @click="auditCheck(index,item)">{{item.name}}</Button>
      <Form ref="searchForm" :model="searchForm" inline :label-width="75" class="search-form">
        <Form-item label="活动名称" prop="name">
          <Input type="text" v-model="searchForm.name" placeholder="请输入活动名称" clearable style="width: 200px" />
        </Form-item>
        <Form-item label="活动状态">
          <Select v-model="searchForm.activityStatus" placeholder="请选择" clearable style="width: 200px">
            <Option value="null">全部</Option>
            <Option value="0">未开始</Option>
            <Option value="1">已开始</Option>
            <Option value="2">未启用</Option>
            <Option value="3">已启用</Option>
            <Option value="4">已结束</Option>
          </Select>
        </Form-item>
        <Button @click="handleSearch" class="search-btn" type="primary" icon="ios-search">搜索</Button>
        <Button class="search-btn" type="primary" @click="handleReset">重置</Button>
      </Form>
      </Row>
      <Table :loading="loading" border :columns="columns" class="mt_10" :data="data" ref="table"></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total show-elevator show-sizer></Page>
      </Row>
    </Card>
    <Modal :title="modalTitle" v-model="detailFlag" :mask-closable="false" :closable='false' :styles="{ top: '30px' }">
      <Form ref="form" :model="form" :rules="ruleValidate" :label-width="100">
        <FormItem label="审批意见" prop="status" required>
          <Select v-model="form.status" placeholder="请选择" clearable style="width: 350px">
            <Option value="0">通过</Option>
            <Option value="1">驳回</Option>
          </Select>
        </FormItem>
        <FormItem class="form-item-view-el" label="备注" required>
          <Input v-model="form.reason" placeholder="请输入" style="width: 350px" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="handleCancel()" style="margin-left: 8px">取消</Button>
        <Button type="primary" @click="handleSubmit()">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  getActivityAudit,
  submitAudit
} from "@/api/activity.js"
import region from "@/views/lili-components/region-every"
import Cookies from "js-cookie"
import editor from "@/views/my-components/lili/editor"
import uploadPicInput from "@/views/my-components/lili/upload-pic-input"
export default {
  name: "goods-audit",
  components: {
    editor,
    uploadPicInput,
    region
  },
  data () {
    return {
      auditType: 0,//审核状态
      audit: [
        {
          name: '全部',
          value: null
        },
        {
          name: '待审核',
          value: 0
        },
        {
          name: '已审核',
          value: 1
        }
      ],
      modalTitle: '审核',
      morenregionId: '',// 默认地区
      userInfo: '',//用户信息
      loading: true, // 表单加载状态
      detailFlag: false,
      form: {
        status: '',
        reason: '',
        activityId: '',
        activityType: 0,//活动类型
      },
      searchForm: {
        // 请求参数
        pageNumber: 1,
        pageSize: 10,
        order: "desc",// 默认排序方式
        sort: "create_time", // 默认排序字段
        activityType: 0,
      },

      columns: [
        {
          type: 'index',
          title: '序号',
          width: 60,
          align: 'center'
        },
        {
          title: "提交人类型",
          key: "submitType",
          render: (h, params) => {
            return h(
              "div", {},
              params.row.submitType === '1' ? '城市合伙人' : params.row.submitType === '2' ? '商家' : "平台"
            )
          },
        },
        {
          title: "会员姓名",
          key: "nickName",
        },
        {
          title: "手机号",
          minWidth: 40,
          key: "mobile",
          tooltip: true,
        },
        {
          title: "店铺名称",
          key: "storeName",
        },
        {
          title: "活动名称",
          minWidth: 40,
          key: "name",
        },
        {
          title: "限量数量",
          key: "quantity",
          minWidth: 10,
          render: (h, params) => {
            return h(
              "div", {},
              params.row.quantityFlag ? params.row.quantity : '不限购'
            )
          },
        },
        {
          title: "活动开始时间",
          minWidth: 40,
          key: "activityStartTime",
          tooltip: true,
        },
        {
          title: "活动结束时间",
          minWidth: 40,
          key: "activityEndTime",
          tooltip: true,
        },
        {
          title: "发布时间",
          align: "left",
          minWidth: 40,
          key: "createTime",
        },
        {
          title: "活动状态",
          key: "activityStatus",
          minWidth: 40,
          render: (h, params) => {
            if (params.row.activityStatus === '0') {
              return h(
                "Tag", {
                props: {
                  color: "blue",
                },
              },
                "未开始"
              )
            } else if (params.row.activityStatus === '1') {
              return h(
                "Tag", {
                props: {
                  color: "magenta",
                },
              },
                "已开始"
              )
            } else if (params.row.activityStatus === '2') {
              return h(
                "Tag", {
                props: {
                  color: "green",
                },
              },
                "未启动"
              )
            } else if (params.row.activityStatus === '3') {
              return h(
                "Tag", {
                props: {
                  color: "volcano",
                },
              },
                "已启动"
              )
            } else {
              return h(
                "Tag", {
                props: {
                  color: "red",
                },
              },
                "已结束"
              )
            }
          },
        },
        {
          title: "审核活动状态",
          key: "auditStatus",
          minWidth: 40,
          render: (h, params) => {
            if (params.row.auditStatus === '0') {
              return h(
                "Tag", {
                props: {
                  color: "volcano",
                },
              },
                "未审核"
              )
            } else if (params.row.auditStatus === '1') {
              return h(
                "Tag", {
                props: {
                  color: "green",
                },
              },
                "待审核"
              )
            } else if (params.row.auditStatus === '2') {
              return h(
                "Tag", {
                props: {
                  color: "red",
                },
              },
                "未通过"
              )
            } else if (params.row.auditStatus === '3') {
              return h(
                "Tag", {
                props: {
                  color: "red",
                },
              },
                "已通过"
              )
            } else if (params.row.auditStatus === '4') {
              return h(
                "Tag", {
                props: {
                  color: "volcano",
                },
              },
                "未通过"
              )
            }

          },
        },
        {
          title: "备注",
          key: "remarks",
          tooltip: true,
          render: (h, params) => {
            return h(
              "div", {},
              params.row.auditStatus === '0' ? '' : params.row.remarks
            )
          },
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 200,
          fixed: "right",
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  justifyContent: "center",
                },
              },
              [
                h(
                  "Button", {
                  props: {
                    type: "info",
                    size: "small",
                    ghost: true,
                  },
                  style: {
                    marginRight: "5px",
                    display: (params.row.auditStatus == '0' || params.row.auditStatus == '1' && this.userInfo.roles.length == 0) ? 'inline-block' : 'none'
                  },
                  on: {
                    click: () => {
                      this.auditClick(params.row)
                    },
                  },
                },
                  "审核活动"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "info",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                    },
                    on: {
                      click: () => {
                        this.detail(params.row)
                      },
                    },
                  },
                  "活动详情"
                )
              ]
            )
          },
        },
      ],
      data: [], // 活动数据
      total: 0, // 表单数据总数
      ruleValidate: {
        status: [
          { required: true, message: "请选择审批意见", trigger: "blur" },
        ],
      }
    }
  },
  created () {
    // 菜单初始化
    this.userInfo = JSON.parse(Cookies.get("userInfoManager"))
    if (this.userInfo.roles.length > 0) {
      this.audit.push({ name: '已完成', value: 2 })
    }
  },
  methods: {
    // 取消事件
    handleCancel () {
      this.form = {
        activityId: '',
        status: '',
        reason: ''
      }
      this.morenregionId = ''
      this.detailFlag = !this.detailFlag
      this.EditObj = {}
      this.$refs.form.resetFields()
    },
    //审核查询
    auditCheck (i, item) {
      this.auditType = i
      this.searchForm.auditStatus = item.value
      this.getData()
    },
    auditClick (row) {
      this.detailFlag = true
      this.form.activityId = row.id
    },
    // 审批提交
    handleSubmit (i) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.reason == '' && this.form.status == '1') {
            this.$Message.error("请输入驳回原因")
            return
          }
          submitAudit(this.form).then((res) => {
            if (res.code == 200) {
              this.detailFlag = !this.detailFlag
              this.form = {
                activityId: '',//活动id
                status: '',//审批
                reason: ''//原因驳回原因
              }
              this.$Message.success(res.result)
              this.$refs.form.resetFields()
              this.getData()
            } else {
              this.$Message.error("审核失败！")
            }
          })

        } else {
          this.$Message.error("还有必填项未做处理，请检查表单")
        }
      })
    },
    dateFtt (fmt, date) {
      if (date) {
        //author: meizz
        var o = {
          "M+": date.getMonth() + 1, //月份
          "d+": date.getDate(), //日
          "h+": date.getHours(), //小时
          "m+": date.getMinutes(), //分
          "s+": date.getSeconds(), //秒
          "q+": Math.floor((date.getMonth() + 3) / 3), //季度
          S: date.getMilliseconds(), //毫秒
        }
        if (/(y+)/.test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            (date.getFullYear() + "").substr(4 - RegExp.$1.length)
          )
        for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length == 1
                ? o[k]
                : ("00" + o[k]).substr(("" + o[k]).length)
            )
        return fmt
      }
    },

    // 分页 改变页码
    changePage (v) {
      this.searchForm.pageNumber = v
      this.getData()
    },
    // 分页 改变页数
    changePageSize (v) {
      this.searchForm.pageSize = v
      this.searchForm.pageNumber = 1
      this.getData()
    },
    // 搜索
    handleSearch () {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getData()
    },
    handleReset () {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.searchForm.name = ""
      this.searchForm.activityStatus = ''
      this.getData()
    },
    //查询商品活动列表
    getData () {
      getActivityAudit(this.searchForm).then((res) => {
        if (res.result.records) {
          this.loading = false
          this.data = res.result.records.map(item => {
            let registrationStartStopTime = []
            registrationStartStopTime.push(item.registrationStartTime, item.registrationEndTime)
            return {
              ...item,
              registrationStartStopTime
            }
          })
          this.total = res.result.total
        }
      })
    },

    //查看详情
    detail (row) {
      this.$router.push({
        name: "audit-detail",
        query: {
          id: row.id,
          submitType: row.submitType,
          activityType: row.activityType
        },
      })
    },
  },
  mounted () {
    this.getData()
  },
};
</script>
<style lang="scss" scoped>
.but {
  color: rgb(131, 131, 131);
  font-size: 16px;
  margin-bottom: 15px;
}
.buts {
  color: rgb(255, 255, 255);
  background-color: rgb(255, 112, 112);
}
/deep/ .ivu-table-wrapper {
  width: 100%;
}

/deep/ .ivu-card {
  width: 100%;
}

.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.item {
  width: 350px !important;
  display: flex;

  > * {
    margin: 0 4px;
  }
}
</style>
